<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../admin/css/admin.css"/>
	</head>
	<body>
		<div class="layui-tab page-content-wrap"  >
		  <ul class="layui-tab-title">
		    <li class="layui-this">修改资料</li>
		    <li>修改密码</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
		    	<form class="layui-form" style="width: 90%;padding-top: 20px;" id="updateUser">
				  <div class="layui-form-item">
				    <label class="layui-form-label" >ID：</label>
				    <div class="layui-input-block">
				      <input type="text" name="id"  disabled autocomplete="off" class="layui-input layui-disabled" th:value="${session.adminUser.id}">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">用户名：</label>
				    <div class="layui-input-block">
				      <input type="text" name="username"  autocomplete="off"  required  lay-verify="required" placeholder="请输入用户名"  class="layui-input" th:value="${session.adminUser.username}">
				    </div>
				  </div>

				  <div class="layui-form-item">
				    <label class="layui-form-label">电话号码：</label>
				    <div class="layui-input-block">
				      <input type="text" name="phone" required   lay-verify="required" placeholder="请输入电话号码" autocomplete="off" class="layui-input" th:value="${session.adminUser.phone}">
				    </div>
				  </div>
					<div class="layui-form-item">
						<label class="layui-form-label">头像：</label>
						<div class="layui-input-block">
							<input type="text" name="header_url"  id="header_urlText" style="display: none;" th:value="${session.adminUser.header_url}"  autocomplete="off" class="layui-input" >
							<img th:src="${session.adminUser.header_url}" width="50" height="50" id="header_url" onclick="updHeaderUrl()" title="点击修改头像">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" >角色：</label>
						<div class="layui-input-block">
							<input type="text" name="id"  disabled autocomplete="off" class="layui-input layui-disabled" th:value="${session.adminUser.role}">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" >注册时间：</label>
						<div class="layui-input-block">
							<input type="text" name="id"  disabled autocomplete="off" class="layui-input layui-disabled" th:value="${#dates.format(session.adminUser.created,'yyyy年MM月dd日HH:mm')}">
						</div>
					</div>
				  <div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="adminInfo">立即提交</button>
				    </div>
				  </div>
				</form>
		    </div>
			  <input type="file" style="display: none;" id="file" />

			  <div class="layui-tab-item">
		    	<form class="layui-form" v style="width: 90%;padding-top: 20px;">
					<div class="layui-form-item" >
						<label class="layui-form-label" >ID：</label>
						<div class="layui-input-block">
							<input type="text" name="id"   disabled autocomplete="off" class="layui-input layui-disabled" th:value="${session.adminUser.id}">
						</div>
					</div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">旧密码：</label>
				    <div class="layui-input-block">
				      <input type="password" onblur="oldPasswords(this.id)" th:id="${session.adminUser.password}" name="oldpassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">新密码：</label>
				    <div class="layui-input-block">
				      <input type="password"  name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">重复密码：</label>
				    <div class="layui-input-block">
				      <input type="password"  name="password2" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="adminPassword">立即提交</button>
				    </div>
				  </div>
				</form>
		    </div>
		  </div>
		</div>
	<script src="../admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.12.4.min.js"></script>
		<script src="../js/md5.js" type="text/javascript" charset="UTF-8"></script>

		<script>
		var oldPassword =''
		function oldPasswords(text){
			oldPassword = text;
		}

		//Demo
		layui.use(['form','element'], function(){
		  var form = layui.form();
		  var element = layui.element();
		  form.render();
		  //监听信息提交
		  form.on('submit(adminInfo)', function(data){
		  	$.post("../admin/user/update",data.field,function (result) {
				if (result=='ok'){
					layer.msg('修改个人信息成功');
					$("#updateUser").load(location.href + " #updateUser")
				}else{
					layer.msg('修改失败');
				}

			})
		    return false;
		  });
		  //监听密码提交
		   form.on('submit(adminPassword)', function(data){
		   var text = data.field.oldpassword;
		   if (hex_md5(text)!=oldPassword){
			   layer.msg('原密码输入错误！！');
			   return false;
		   }
			   var id = data.field.id;
			   var password = hex_md5(data.field.password);
			   $.post("../admin/user/update",{id,password},function (result) {
				   if (result=='ok'){
					  window.location.replace("../admin/login")
				   }else{
					   layer.msg('修改失败');
				   }

			   })
		    return false;
		  });
		});
		$(function () {
			$("#file").change(function () {
				//选择文件
				var filePath = $("#file").val();
				filePath = filePath.toUpperCase();
				//设置上传文件类型
				if (filePath.indexOf(".JPG") != -1 || filePath.indexOf(".BMP") != -1 || filePath.indexOf(".PNG") != -1 || filePath.indexOf(".GIF") != -1 || filePath.indexOf(".JPEG") != -1) {
					var form = new FormData();
					form.append('file', $('#file')[0].files[0]);
					//上传文件
					$.ajax({
						url: '../admin/user/upload',
						type: 'post',
						data: form,
						cache: false,
						//阻止Ajax将参数转成成String类型的键值对，需要设置processData属性为false，
						processData: false,
						//form的enctype="multipart/form-data"才能上传文件。Ajax的默认编码方式是application/x-www-form-urlencoded
						contentType: false,

						success: function (data) {
							if(data!=null){
								$("#header_urlText").val(data)
								$("#header_url").attr("src", data)
							}else{
								layer.msg('修改头像异常！！');
							}


						}
					});
				} else {
					layer.msg('请选择正确的文件格式！！');
					return false;
				}
			})
		})
		function updHeaderUrl() {
			document.getElementById("file").click();
		}


	</script>
	</body>
</html>